<template>
    <div>
        <header>
            <h1 class="tc fn pr">
                <router-link class="pa cfff" to="/home" tag="span" style="left:20rem;top: 5rem;">
                    <i class="el-icon-arrow-left f40 "></i>
                </router-link>
                就近加油
            </h1>
            <div class="pr search1">
                <input type="text" v-model="input" placeholder="输入需要搜索的内容" />
                <img @click="searchText" src="../../../assets/img/car-refuel/search.png" alt="">
            </div>
            <a @click="$router.push('/refuel/refuelList')"><span>列表<br />模式</span></a>
        </header>
        <main>
            <div class="map-box">
                <div id="map">

                </div>
            </div>
        </main>
        <footer>
            <div>
                <div class="info">
                    <h1 class="fn">中国石油加油站</h1>
                    <p class="address">山阳区人民与解放路交叉口</p>
                    <a @click="goDetails">
                        <img src="../../../assets/img/car-refuel/info.png" alt="">
                        门店详情>>
                    </a>
                </div>
                <img src="../../../assets/img/home-img/bg.png" alt="">
            </div>
            <button @click="$router.push('/using/navigation')">立即导航</button>
        </footer>
    </div>
</template>

<script>
export default {
    data() {
        return {
            input: ''
        }
    },
    mounted() {
        this.initMap();
    },
    methods: {
        goDetails() {
            this.$router.push({
                path: '/using/details',
                query: {
                    categoryId: 1,
                    index: 0
                }
            });
        },
        initMap() {
            var map = new BMapGL.Map(document.querySelector('#map')); // 创建地图实例 
            var point = new BMapGL.Point(116.403429, 39.924066);  // 创建点坐标 
            map.centerAndZoom(point, 15);   // 地图坐标中心点
            map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

            var myIcon = new BMapGL.Icon(require("../../../assets/img/car-refuel/stores-tab2.png"), new BMapGL.Size(29, 49), {
                anchor: new BMapGL.Size(15, 49)
            });
            // 创建标注对象并添加到地图  
            var marker = new BMapGL.Marker(point, { icon: myIcon });
            map.addOverlay(marker);

            map.enableScrollWheelZoom();

            // 自定义展示内容
            function createDOM() {
                var div = document.createElement('div');
                div.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
                // div.style.backgroundColor = 'black';
                div.style.height = '50rem';
                div.style.width = '130rem';
                div.style.lineHeight = '50rem';
                div.style.whiteSpace = 'nowrap';
                div.style.MozUserSelect = 'none';
                div.style.fontSize = '20rem';
                div.style.borderRadius = '50rem';
                div.style.textAlign = 'center';

                var span = document.createElement('span');
                span.style.lineHeight = '16px';
                span.style.whiteSpace = 'normal';
                span.style.color = 'white';
                div.appendChild(span);
                span.appendChild(document.createTextNode(this.properties.text));

                let img = document.createElement('img');
                img.style.width = '100%';
                img.style.position = 'absolute'
                img.style.top = '4rem'
                img.style.left = 0
                img.style.zIndex = '-1'
                img.src = this.properties.imgSrc;
                div.appendChild(img);

                return div;
            }
            // 创建自定义覆盖物
            var customOverlay = new BMapGL.CustomOverlay(createDOM, {
                point: new BMapGL.Point(116.403429, 39.924066),
                opacity: 0.5,
                offsetY: -80,
                properties: {
                    text: '附近车店 >',
                    imgSrc: require('../../../assets/img/car-refuel/destined.png')
                }
            });
            map.addOverlay(customOverlay);
            customOverlay.addEventListener('click', function (e) {
                console.log(e);
            });
        },
        searchText() {
            console.log(111);
        },
    }
}
</script>

<style scoped>
/deep/ .anchorBL {
    display: none !important;
}

* {
    box-sizing: border-box;
}

header {
    background-color: #3284fc;
    padding-top: 60rem;
    height: 434rem;
}

header>h1 {
    font-size: 32rem;
    color: #fff;
    margin-bottom: 36rem;
}

header .search1 {
    display: inline-block;
    vertical-align: middle;
    margin: 0 19rem 0 40rem;
}

header .search1 input {
    width: 557rem;
    height: 80rem;
    background-color: #f7f7f7;
    outline: none;
    border: 0;
    border-radius: 40rem;
    padding-left: 28rem;
    font-size: 22rem;
}

header .search1 input::placeholder {
    color: #c7c7c7;
    font-size: 20rem;
}

header .search1 img {
    width: 27rem;
    height: 26rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 33rem;
}

header a {
    display: inline-block;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 99rem;
    height: 99rem;
    color: #fff;
    background: url(../../../assets/img/car-refuel/circle.png) no-repeat;
    background-size: 100%;
}

header a span {
    font-size: 22rem;
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

main {
    position: relative;
    width: 100%;
    padding: 0 20rem;
}

main .map-box {
    position: absolute;
    top: -165rem;
    border-radius: 20rem 20rem 0 0;
    width: 710rem;
    height: 755rem;
    background-color: #fff;
    padding: 30rem 30rem 0 30rem;
}

main .map-box div {
    width: 100%;
    height: 100%;
    border-radius: 20rem 20rem 0 0;
}

footer {
    padding: 34rem 57rem 35rem 44rem;
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #fff;
    z-index: 9999;
    height: 310rem;
}

footer button {
    width: 100%;
    border: 0;
    border-radius: 14px;
    height: 80rem;
    background-color: #1D6FFF;
    color: #fff;
    font-size: 25rem;
}

footer>div {
    display: flex;
    align-items: center;
    margin-bottom: 40rem;
}

footer>div>img {
    width: 185rem;
    height: 119rem;
}

footer>div .info {
    flex-grow: 1;
}

footer>div .info h1 {
    font-size: 28rem;
    margin-bottom: 18rem;
}

footer>div .info p {
    font-size: 21rem;
    margin-bottom: 15rem;
}

footer>div .info a {
    font-size: 22rem;
    color: #0662e6;
}

footer>div .info a img {
    width: 25rem;
    height: 25rem;
    vertical-align: -4rem;
}
</style>